<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app" style="height: 100%;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>销售管理</el-breadcrumb-item>
        <el-breadcrumb-item>销售单查询</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="编号:">
            <el-input v-model="form.soId" placeholder="编号" style="width: 160px;"></el-input>
        </el-form-item>
        <el-form-item label="日期:">
            <div class="block">
                <el-date-picker
                        v-model="form.date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" style="width: 240px"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
        </el-form-item>
        <el-form-item label="客户">
            <el-select v-model="form.customerCode" clearable placeholder="请选择供应商" style="width: 202px">
                <el-option v-for="customer in customersFrom.customers" :label="customer.name"
                           :value="customer.customerCode"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="付款方式">
            <el-select v-model="form.payType" clearable placeholder="请选择付款方式" style="width: 202px">
                <el-option v-for="payType in payTypeForm.payType" :label="payType.label"
                           :value="payType.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="处理状态:">
            <el-select v-model="form.status" clearable placeholder="请选择" style="width: 140px">
                <el-option value="1" label="新增"></el-option>
                <el-option value="2" label="了结"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="middle" @click="onSubmit()">查询</el-button>
        </el-form-item>
        <!--<el-form-item>
            <el-button type="primary" size="middle" @click="clear">清空查询</el-button>
        </el-form-item>-->
    </el-form>
    <el-table :data="tableData" height="340px" border style="width: 100%">
        <el-table-column fixed prop="soId" label="采购单编号" width="180">
            <template slot-scope="scope">
                <el-button type="text" @click="showDetails(scope.row.soId)">{{scope.row.soId}}</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="customerName" label="供应商名称" width="180"></el-table-column>
        <el-table-column prop="account" label="创建用户" width="180"></el-table-column>
        <el-table-column prop="tipFee" label="附加费用" width="180"></el-table-column>
        <el-table-column prop="productTotal" label="采购产品总价" width="180"></el-table-column>
        <el-table-column prop="soTotal" label="采购单总价格" width="180"></el-table-column>
        <el-table-column prop="payType" label="付款方式" width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.payType==1">货到付款</span>
                <span v-else-if="scope.row.payType==2">款到发货</span>
                <span v-else-if="scope.row.payType==3">预付款发货</span>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.status==1">新建</span>
                <span v-else-if="scope.row.status==2">收货</span>
                <span v-else-if="scope.row.status==3">付款</span>
                <span v-else-if="scope.row.status==4">了结</span>
                <span v-else-if="scope.row.status==5">预付</span>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :page-sizes="[5, 8, 16, 32, 100]"
            :page-size="pageSize"
            :currentPage="currentPage"
            :total="totalRecord">
    </el-pagination>


    <!--明细单弹框-->
    <el-dialog title="采购单明细" :visible.sync="dialogTableVisible" width="840">
        <el-table :data="gridData">
            <el-table-column property="soId" label="销售单编号" width="180"></el-table-column>
            <el-table-column property="productName" label="商品名称" width="140"></el-table-column>
            <el-table-column property="unitPrice" label="单价" width="120"></el-table-column>
            <el-table-column property="num" label="数量" width="120"></el-table-column>
            <el-table-column property="unitName" label="单位" width="120"></el-table-column>
            <el-table-column property="itemPrice" label="产品总价"></el-table-column>
        </el-table>
    </el-dialog>


</div>

<script>
    window.onload = function () {

        let vm = new Vue({
            el: "#app",
            data: {
                labelPosition: "left",
                dialogFormVisible: false,
                dialogTableVisible: false, /*明细单的展示*/
                gridData: [],  /*明细单数据*/
                tableData: [],
                options: [],
                currentPage: 1,
                totalRecord: 0,
                pageSize: 5,
                form: {
                    soId: "",
                    createTime: "",
                    endTime: "",
                    customerCode: "",
                    payType: "",
                    status: "",
                    date: ""
                },

                customersFrom: {//供应商信息
                    customers: [],
                    customerCode: "",
                    name: ""
                },
                payTypeForm: {
                    payType: [{label: "货到付款", value: 1},
                        {label: "款到发货", value: 2},
                        {label: "预付款发货", value: 3}
                    ],
                    label: "",
                    value: ""
                }
            },
            methods: {
                init: function () {
                    this.loading = false;
                    this.getData(
                        this.currentPage,
                        this.pageSize,
                        this.form.soId,
                        this.form.createTime,
                        this.form.endTime,
                        this.form.customerCode,
                        this.form.payType,
                        this.form.status,
                        this.form.date,
                    );
                },
                getData: function (curP, pSize, soId,createTime,endTime,customerCode,payType,sta,date) {
                    let that = this;

                    console.log(date)
                    if(date != "" && date != null){
                        createTime=date[0];
                        endTime=date[1];
                    }

                    if(payType == ""){
                        payType = 0;
                    }

                    if(sta == ""){
                        sta = 0;
                    }

                    axios.get("getSomain?currentPage="+curP+"&pageSize="+pSize+"&soId="+soId+"&createTime="+createTime+"&endTime="+endTime+"&customerCode="+customerCode+"&payType="+payType+"&status="+sta).then(function (resp) {
                        that.tableData = resp.data.data.lists;
                        console.log(resp.data.data.lists);
                        that.totalRecord = resp.data.data.totalRecord;
                    });
                    //查询供应商信息
                    axios.get("getCustomerMassage").then(function (resp) {
                        that.customersFrom.customers = resp.data.data;
                    });
                },
                handleCurrentChange: function (val) {
                    this.currentPage = val;
                    this.init();
                },
                handleSizeChange: function (val) {
                    this.pageSize = val;
                    this.currentPage = 1;
                    this.init();
                },
                onSubmit: function() {
                    this.currentPage = 1;
                    this.init();
                },
                //展示明细表
                showDetails: function (soId) {
                    let that = this;
                    this.dialogTableVisible = true;
                    axios.get("getSoItemsBySoId/" + soId).then(function (resp) {
                        console.log(resp.data.data)
                        that.gridData = resp.data.data;
                    });
                },
            }
        });

        vm.init();
    }
</script>